<!DOCTYPE html>
<html lang="en">
<head>
    <{include file="public_html/header_tag.html" }>
</head>
<body>
<header class="brB">
	<div class="h_top">
    	<div class="hLeft"><a href="javascript:;" class="icoH icoReturn mt20"></a></div>
    	<div class="hCenter"><span class="tit c-3ac9af">所有题库</span></div>
    </div>
</header>
<div class="warp">
    <{if $subject_list|count > 0}>
	<div class="pt20" id="layui_flow">
    	<ul class="b-FFFFFF">
    		<{foreach from=$subject_list item=item key=key name=foo}>
        	<li class="p20 brB">
        		<a href="/my/tiku/practice_index/<{$item.id}>">
            	<dl class="layout-box">
                    <dt class="ith_img2">
                        <span class="mr20" style="height:3rem; width:4rem; background-image:url(<{$item.img}>)"></span>
                    </dt>
                    <dd class="box-col">
                    	<div><span class="fs26"><{$item.title}></span></div>
                    	<div><span class="fs22 c-666666">所属科目：<{$item.name}></span></div>
                    </dd>
                </dl>
                </a>
            </li>
            <{/foreach}>
        </ul>
    </div>
    <{else}>
    <div style="width: 100%;text-align: center; font-size: 10px; font-weight: bold;">
        <p style="padding:20px 0;">暂无数据</p>
    </div>
    <{/if}>
</div>
<link href="/static/public/layer/src/css/layui.css" rel="stylesheet">
<script src="/static/public/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/static/public/layer/src/layui.js"></script>
<script>
layui.use('flow', function(){
  	var flow = layui.flow;
  	flow.load({
    	elem: '#layui_flow' //流加载容器
    	,isAuto:false
    	,scrollElem: '#layui_flow' //滚动条所在元素，一般不用填，此处只是演示需要。
    	,done: function(page, next){ //执行下一页的回调
      		//模拟数据插入
	      	setTimeout(function(){
	        	var lis = [];
	        	if(page > 1){
	        		$.ajax({
		                type: "GET",
		                url: "/topic/index/"+page,
		                dataType:"json",
		                success: function(result){
		                    if(result){
		                    	$.each(result,function(i,j){
									html = '';
									html += '<li class="p20 brB">';
						        	html += '<a href="/my/tiku/practice_index/'+j.id+'">';
						            html += '<dl class="layout-box">';
						            html += '<dt class="ith_img2">';
						            html += '<span class="mr20" style="height:3rem; width:4rem; background-image:url('+j.img+')"></span>';
						            html += '</dt>';
						            html += '<dd class="box-col">';
						            html += '<div><span class="fs26">'+j.title+'</span></div>';
						            html += '<div><span class="fs22 c-666666">所属科目：'+j.name+'</span></div>';
						            html += '</dd>';
						            html += '</dl>';
						            html += '</a>';
						            html += '</li>';
				                	// lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
				                	lis.push(html)
				                	$("#layui_flow").find("li:last").after(html)
				                	console.log(html)
								});

		                    }
		                }
		            });
	        	}
	        	
	        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
	        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
	        	next(lis.join(''), page < "<{$count-1}>"); //假设总页数为 10
	      	}, 500);
    	}
  	});
});
</script>
</body>
</html>